Como ficou definido no documento 4, os elementos html podem ser divididos nas seguintes classes :
1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer>
<header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure>
<figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code>
<data><dfn><em><i><kbd><mark><q><s><samp>
<small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table>
<tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input>
<label><legend><meter><optgroup><option><output><progress>
<select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>
Neste documento discutiremos a classe 10-ELEMENTOS DE CONTEÚDOS EM TABELA.
As tags de tabela foram fundamentais na web 1.0 para visualizar as informações de maneira alinhada verticalmente
mais ou menos como fazemos hoje com o GRID ou mesmo com a tabela nova.
Na web 1.0 só existiam as tags table, tr e td e isto limitava a formatação do restante que tinha que ser feito
por meio de recursos html extras.
Estas tags são utilizadas numa hierarquia, ou seja, você nunca vai ver uma tag tr antes de uma table. Seria um erro
de programação. Portanto, abaixo tomei a liberdade de colocar as tags na ordem que são utilizadas normalmente.
Notas :
1 - Nem todas as tags são fundamentais na table. A tag thead, por exemplo, não é obrigatória.
2 - Cuidado com o número de colunas. Deve ser sempre o mesmo tanto para o cabeçalho quanto para o corpo como para o
rodapé. Se usar um colspan a somatória de colunas deve ser o mesmo e constante em toda a tabela.
Podemos dizer que em HTML5 a tabela esta dividida em 3 partes :
Cabeçalho, corpo e rodapé.
Apresentarei todas as tags e no final um exemplo de uma tabela completa utilizando todas as tags.
1-<table>
Define o início de uma tabela. É o container de todas as tags abaixo. Esta tag é fundamental.
2-<caption>
Define um titulo para a tabela. Esta mensagem é exibida no rodapé da tabela, logo após a tabala, como se a tabela
fosse uma imagem e esta tag seria sua descrição logo abaixo alinhada à esquerda. Esta tag é opcional.
3-<thead>
É uma tag agrupadora dos elementos de cabeçalho da tabela. Toda formatação do cabeçalho de tabela é feita aqui.
Nota: Esta tag é opcional já que podemos querer que a tabela não tenha cabeçalho.
Agrupa tags tr e th.
<th>
Representa uma coluna do cabeçalho da tabela.
4-<tbody>
É a tag agrupadora do conteúdo da tabela. Representa o corpo da tabela. Esta tag é opcional mas lógicamente a tabela
irá exibir dados e, portanto, as tags tr e td serão exibidas sem agrupadores.
Agrupa as tags tr e td.
É a tag agrupadora dos elementos do rodapé da tabela. Normalmente exibem um sumário, um resumo ou totalização dos dados
da tabela. Todos os itens desta tag são opcionais.
Nota : Este elemento é exibido sem destaque e pode ser confundido com uma linha da tabela e não uma linha de
totalização.
Agrupa as tags tr e td como no body.
<colgroup>
É um agrupador de colunas e é normalmente usado até mesmo antes do header da tabela para definir a cor de fundo
para o grupo de colunas selecionado e sempre deve ter como tag pai a tag table. Ela agrupa as colunas e define
um fundo para elas destacando-as das demais. Agrupa a tag col.
<col>
É uma coluna da tag agrupadora colgroup. Define um aspecto diferenciado para as colunas por ele agrupadas. Sua tag
pai é a colgroup.
<td>
Representa uma coluna da tabela tanto do corpo como do rodapé. Apenas o cabeçalho da tabela tem uma definição de coluna
diferente com a tag th.
<tr>
Define uma linha na tabela. É usada em todas as partes da tabela ( cabeçalho, corpo e rodapé. )
Exemplo 1 (todos os componentes da tabela):
<table style="width:100%;">
<caption>Vendas Mensais</caption>
<colgroup>
<col span="2" style="background-color:lightblue">
<col style="background-color:yellow">
</colgroup>
<thead style="border:1px dotted green">
<tr style="text-align:center">
<th style="padding:10px;">Mês</th>
<th>Faturamento</th>
<th>Líquido</th>
</tr>
</thead>
<tbody style="text-align:center">
<tr>
<td style="padding:10px;">Janeiro</td>
<td>R$ 12.378,56</td>
<td>R$ 3.496,24</td>
</tr>
<tr>
<td style="padding:10px;">Fevereiro</td>
<td>R$ 17.236,43</td>
<td>R$ 5.936,64</td>
</tr>
</tbody>
<tfoot style="color:blue;font-weight:bold;text-align:center">
<tr>
<td style="padding:10px;">Total</td>
<td>R$ 29.614,99</td>
<td>R$ 9.432,88</td>
</tr>
</tfoot>
</table>
Como o browser exibe :
Vendas Mensais
| Mês |
Faturamento |
Líquido |
| Janeiro |
R$ 12.378,56 |
R$ 3.496,24 |
| Fevereiro |
R$ 17.236,43 |
R$ 5.936,64 |
| Total |
R$ 29.614,99 |
R$ 9.432,88 |
<colspan>
Algumas vezes desejamos expandir uma coluna para que ocupe o espaço de 2 ou mais colunas.
Para isto utilizamos o atributo colspan em uma tag td.
Exemplo:
<td colspan"2">Esta coluna terá 2 colunas de largura</td>
<rowspan>
Algumas vezes desejamos expandir uma linha para que ocupe o espaço de 2 ou mais linhas.
Para isto utilizamos o atributo rowspan em uma tag tr.
Exemplo:
<tr rowspan"2"><td>Esta linha terá 2 linhas de altura</td></tr>
Exemplo 2 (colspan e rowspan):
<table style="width:100%;">
<tr>
<td colspan="2" style="border:1px solid red">col1 com colspan2</td>
<td style="border:1px solid red">col2</td>
</tr>
<tr>
<td style="border:1px solid red;width:60%">col 1-2 sem nada</td>
<td style="border:1px solid red;width:20%">col 2-2 sem nada</td>
<td style="border:1px solid red;width:20%">col 3-2 sem nada</td>
</tr>
<tr rowspan="2">
<td style="border:1px solid red">
col1-3 dentro de uma rowpan 2-
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a nunc a purus fermentum efficitur.
Etiam scelerisque iaculis dapibus. Cras lectus eros, vehicula a aliquam sit amet, tristique vitae nisl.
Vivamus at ultrices elit, eget lobortis lacus. Nulla ut imperdiet dolor.
</td>
<td style="border:1px solid red">col2-3</td>
<td style="border:1px solid red">col3-3</td>
</tr>
</table>
Como o browser exibe :
| col1 com colspan2 |
col2 |
| col 1-2 sem nada |
col 2-2 sem nada |
col 3-2 sem nada |
|
col1-3 dentro de uma rowpan 2-
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a nunc a purus fermentum efficitur.
Etiam scelerisque iaculis dapibus. Cras lectus eros, vehicula a aliquam sit amet, tristique vitae nisl.
Vivamus at ultrices elit, eget lobortis lacus. Nulla ut imperdiet dolor.
|
col2-3 |
col3-3 |
Nota : Na linha central coloquei a largura de 60%, 20% 3 20% da tela para cada coluna senão na terceira linha ela ocuparia
toda a largura da tela e espremeria as colunas à direita e as faria ocupar mais de uma linha e aí o efeito do
rowspan não seria visivel.
Nota : Ao expandir uma linha ou uma coluna da tabela para exibir um certo resultado pode fazer com que as demais
colunas ou linhas sejam afetadas pois todas as colunas tem a mesma largura e todas as linhas tem a mesma altura.